<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="vue.js"></script>
  <style>
    #app .notAllow{
      cursor: not-allowed;
    }
    li{
      list-style-type: none;
      height:60px;
      line-height: 60px;
      width:400px;
      background: rgb(233, 187, 37); 
      color:#fff;
      padding-left:10px;
      margin-top:5px;
    }
    .fade-enter{
      transform:translateX(-500px);
      opacity: 0;
    }
    .fade-leave-to{
      transform:translateX(500px);
      opacity: 0;
    }
    .fade-enter-active,.fade-leave-active{
      transition: all 1s;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container ">
      <div class="form-inline">
        <input type="text" v-model.trim="inputTxt" style="min-width:400px;margin-right:10px" class="form-control">
        <button class="btn btn-primary" @click="add">增加</button>
      </div>
      <hr>
      <p v-if="!lists.length">暂无留言</p>
      <ul v-else>
        <transition-group name="fade">
          <li  v-for="(list,index) in lists" :key="index" @click.self="del(index)">
            {{list.content}}
            <button @click="handleDown(index)" :class="['btn',list.isDown?'btn-primary':'btn-danger','btn-sm',{notAllow:list.isDown}]">已完成</button>
          </li>
        </transition-group>
      </ul>
    </div>

  </div>
  <script>
    let vm = new Vue({
      el:"#app",
      data:{
        inputTxt:"",
        lists:[]
      },
      methods:{
        add(){
          if(this.inputTxt == ""){
            return;
          }
          this.lists.push({
            content:this.inputTxt,
            isDown:false
          });
          this.inputTxt = "";
        },
        handleDown(index){
          // 改变状态
          if(this.lists[index].isDown){
            return;
          }
          this.lists[index].isDown = true;
          console.log(this.lists);
        },
        del(i){
          if( confirm("您确认删除吗") ){
            this.lists.splice(i,1)
          }
        }
      }
    })

    /*
    如何删除数组中 指定位置的元素
    splice(index,1)
    */ 
  </script>
</body>

</html>